<template>
	<view class="container">

		<view class="main-header">
			<!-- 用户信息 -->
			<view class="user-info">
				<view class="user-avatar" @click="handlePersonal()">
								<avatar-image :url="userInfo.avatar_url" :width="100" />

				
				</view>
				<view class="user-content">
					<!-- 会员昵称 -->
					<view class="nick-name oneline-hide" @click="handlePersonal()"> {{ userInfo.nick_name }}
					</view>

					<!-- 会员无等级时显示手机号 -->
					<view class="mobile">{{ userInfo.mobile }}</view>
				</view>
			</view>
			<view class="log">

				<view class="l-btn" @click="toLog">
					<view>布置记录</view>
				</view>

			</view>
		</view>

		<view class="box">
			<view class="item">
				<view class="title">词汇本</view>
			</view>
			<view class="item-content">

				<view class="shuru-choose" @click="bookShow=true">
					<view style="width: 90%;">{{book}}</view>
					<view><u-icon name="arrow-down"></u-icon></view>
				</view>
				<view style="padding-top: 10rpx;font-size: 28rpx;">
					<text>词汇量：{{total_num}}个</text>
				</view>

			</view>

			<view class="two-box">
				<view style="width: 65%;">
					<view class="item">
						<view class="title">词汇范围</view>
					</view>
					<view style="display: flex;padding: 30rpx 20rpx;">
						<view class="shuru" style="width: 140rpx;text-align: center;padding-left: 0rpx;">
							<input type="number" class="form-item--input" v-model="form.start_num" />
						</view>
						<view style="display: flex;justify-content: center;align-items: center;padding: 0 30rpx;">
							<view style="width: 24rpx;border-bottom: solid 4rpx #BBBBBB;"></view>
						</view>
						<view class="shuru" style="width: 140rpx;text-align: center;padding-left: 0rpx;">
							<input type="number" class="form-item--input" v-model="form.end_num" />
						</view>
					</view>

				</view>

				<view style="width: 30%;">
					<view class="item">
						<view class="title">抽查个数</view>
					</view>
					<view style="display: flex;padding: 30rpx 20rpx;">
						<view class="shuru" style="width: 140rpx;text-align: center;padding-left: 0rpx;">
							<input type="number" class="form-item--input" v-model="form.choose_num" />
						</view>

					</view>
				</view>


			</view>


			<view class="item">
				<view class="title">抽查形式</view>
			</view>
			<view style="height: 240rpx;">
				<view class="item-content-choose">
					<view class="type-box" @click="chooseType(1)">
						<view class="type" :class="current==1?'active':''">
							<text>中翻英</text>
						</view>
					</view>
					<view class="type-box" @click="chooseType(2)">
						<view class="type" :class="current==2?'active':''">
							<text>英翻中</text>
						</view>
					</view>
					<view class="type-box" @click="chooseType(3)">
						<view class="type" :class="current==3?'active':''">
							<text>听英写英</text>
						</view>
					</view>
				</view>
				<view class="item-content-choose">
					<view class="type-box" @click="chooseType(4)">
						<view class="type" :class="current==4?'active':''">
							<text>听英写中</text>
						</view>
					</view>
					<view class="type-box" @click="chooseType(5)">
						<view class="type" :class="current==5?'active':''">
							<text>听英写英中</text>
						</view>
					</view>
					<view class="type-box" @click="chooseType(6)">
						<view class="type" :class="current==6?'active':''">
							<text>看英写英中</text>
						</view>
					</view>

				</view>
			</view>
		

			<view class="item">
				<view class="title">单个单词填写时长（S）</view>
			</view>
			<view class="item-content">

				<view class="shuru" style="width: 140rpx;padding-left: 0;text-align: center;">
					<input type="number" class="form-item--input" v-model="form.time" />
				</view>


			</view>
			<view class="item">
				<view class="title">通过率（%）</view>
			</view>
			<view class="item-content">

				<view class="shuru" style="width: 140rpx;padding-left: 0;text-align: center;">
					<input type="number" class="form-item--input" v-model="form.suc" />
				</view>


			</view>
			<view class="item">
				<view class="title">学生姓名</view>
			</view>
			<view class="item-content">

				<view class="shuru">
					<input type="text" class="form-item--input" placeholder="请输入学生姓名" v-model="form.name" />
				</view>


			</view>



		</view>

		<u-select v-model="bookShow" :list="bookList" @confirm="chooseBook" label-name="name"
			value-name="book_id"></u-select>

		<view class="foot">

			<view class="btn" @click="toExam">
				生成考试并分享
			</view>
		</view>

		<u-popup v-model="shareShow" mode="bottom" border-radius="14" >
			<view class="share-box">
				<view class="share-item">
					<view class="share-image">
						<image src="../../../static/images/share.png"></image>
					</view>
					<view class="share-title">
						<button class="share-btn" open-type="share">
							<view>
								<view class="s-title">发送给好友</view>
								<view class="desc">
									转发链接给微信好友
								</view>
							</view>
						</button>

					</view>
					<view class="s-right">
						<u-icon name="arrow-right" color="#A8B5BC"></u-icon>
					</view>

				</view>
				<view class="share-item">
					<view class="share-image">
						<image src="../../../static/images/qrcode.png"></image>
					</view>
					<view class="share-title" @click="onExtractQRCode()">
						<view class="s-title">生成二维码</view>
						<view class="desc">
							保存到手机分享给微信好友
						</view>
					</view>
					<view class="s-right">
						<u-icon name="arrow-right" color="#A8B5BC"></u-icon>
					</view>

				</view>

			</view>
		</u-popup>
			<!-- 核销二维码弹窗 -->
		<u-popup v-model="showQRCodePopup" mode="center" width="80%" border-radius="26" :closeable="true">
			<view class="qrcode-popup">
				<view class="qr-title">试卷二维码</view>
				<view class="pop-content">
					<image v-if="qrcodeImage" class="image" :src="qrcodeImage"></image>
				</view>
			</view>
		</u-popup>

		<u-tabbar v-model="current2" :list="teacherList" active-color="#1684FC" @change="changeTab"></u-tabbar>
	</view>
</template>

<script>
	import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue'
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins'
	import AvatarImage from '@/components/avatar-image'
	import * as BookApi from '@/api/ant/book'
	import * as PageApi from '@/api/page'

	import * as UserApi from '@/api/user'
	import {
		getEmptyPaginateObj,
		getMoreListData
	} from '@/core/app'

	const pageSize = 15

	export default {
		components: {
			MescrollBody,
			AvatarImage
		},
		mixins: [MescrollMixin],
		data() {
			return {
				form: {
					start_num: '',
					end_num: '',
					choose_num: '',
					// start_num: 1,
					// end_num: 10,
					// choose_num: 8,
					time: 10,
					book_name: 'pre plus',
					name: '',
					suc: 90,
					book_id: 0
				},
				qrcodeImage:'',
				showQRCodePopup:false,
				imageUrl:'',
				paper_id: 0,
				total_num: 0,
				type: 0,
				book: '请选择词汇本',
				bookShow: false,
				userInfo: {},
				shareShow: false,
				id: 0,
				current: 1,
				current2: 0,
				bookList: [{
						value: '1',
						label: 'pre plus'
					},
					{
						value: '2',
						label: 'pre plus2'
					}
				],
				teacherList: [{
						iconPath: "https://i.antiedu.tech/static/tabbar/home.png",
						selectedIconPath: "https://i.antiedu.tech/static/tabbar/home-active.png",
						text: '首页',
						isDot: false,
						customIcon: false,
					},
					{
						iconPath: "https://i.antiedu.tech/static/tabbar/user.png",
						selectedIconPath: "https://i.antiedu.tech/static/tabbar/user-active.png",
						text: '我的',

						isDot: false,
						customIcon: false,
					},
				],
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.getBookList()
			this.getPage()
			this.getUserInfo()
		},

		methods: {
			
			toLog(){
				uni.navigateTo({
					url:'/pages/ant/teacher/log'
				})
			},
			
			// 获取增值服务二维码
			onExtractQRCode() {
				const app = this
				BookApi.paperQrcode(app.paper_id)
					.then(result => {
						app.qrcodeImage = result.data.qrcode
						app.showQRCodePopup = true
					})
			},
			chooseType(curr) {
				this.current = curr
			},

			chooseBook(e) {
				console.log(e)
				this.book = e[0].label

				this.bookList.forEach(item => {
					if (item.book_id == e[0].value) {
						this.type = item.type
						this.form.book_id = e[0].value
						this.form.book_name = e[0].label
						this.total_num = item.total_num
						if (item.type == 1) {
							this.current = 1
						} else {
							this.current = 2
						}
					}
				})


			},

			// 获取当前用户信息
			getUserInfo() {
				const app = this

				UserApi.info({})
					.then(result => {
						app.userInfo = result.data.userInfo

					})

			},

			changeTab(e) {


				if (e == 1) {
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}

			},

			toExam() {
				let app = this
				if (app.form.book_id == 0) {
					uni.showToast({
						title: '请选择词汇本',
						icon: 'none'
					})
					return
				}
				if (app.form.start_num == 0||app.form.end_num == 0   || Number(app.form.start_num) > Number(app.form.end_num) || app.form
					.start_num == app.form.end_num) {
						console.log(app.form.start_num)
						console.log(app.form.end_num)
					uni.showToast({
						title: '请填写正确词汇范围',
						icon: 'none'
					})
					return
				}
				
				if (app.form.end_num > app.total_num || app.form.start_num < 1) {
					uni.showToast({
						title: '请填写正确词汇范围2',
						icon: 'none'
					})
					return
				}
				var choose_num = app.form.end_num - app.form.start_num+1

				if (app.form.choose_num == 0 || app.form.choose_num > choose_num) {
					uni.showToast({
						title: '请填写正确抽查个数',
						icon: 'none'
					})
					return
				}


				if (app.form.time == 0 || app.form.time == '') {
					uni.showToast({
						title: '请填写时长',
						icon: 'none'
					})
					return
				}
				if (app.form.suc == 0 || app.form.suc == '') {
					uni.showToast({
						title: '请填写通过率',
						icon: 'none'
					})
					return
				}
				if (app.form.name == '') {
					uni.showToast({
						title: '请填写学生名字',
						icon: 'none'
					})
					return
				}

				//生成试卷
				app.add_paper()


			},

			add_paper() {
				let app = this
				if (app.disabled) {
					return false
				}
				app.disabled = true
				app.form.type = app.current
				BookApi.add_paper(app.form)
					.then(result => {
						app.paper_id = result.data.paper_id
						app.shareShow = true
					}).finally(() => app.disabled = false)
			},

			/**
			 * 上拉加载的回调 (页面初始化时也会执行一次)
			 * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
			 * @param {Object} page
			 */
			upCallback(page) {
				const app = this
				// 设置列表数据

			},
			
			getPage(){
				const pageId = 10001
				PageApi.detail(pageId)
					.then(result => {
						this.imageUrl=result.data.pageData.items[0].data[0].imgUrl
						console.log(result)
						
					})
			},

			// 获取列表
			getBookList(pageNo = 1) {
				const app = this
				return new Promise((resolve, reject) => {
					BookApi.list({
							page: pageNo
						})
						.then(result => {
							// 合并新数据
							const newList = result.data.list
							app.bookList = result.data.list
						})
				})
			},
			/**
			 * 分享当前页面
			 */
			onShareAppMessage() {
			  const app = this
			  console.log(app.paper_id)
			  // 构建页面参数
			  const params = app.$getShareUrlParams({
			    paperId: app.paper_id,
			  })
			  return {
			    title: app.form.book_name,
				//imageUrl:app.imageUrl,
			    path: `/pages/ant/exam/index?${params}`
			  }
			},
			

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 1600rpx;

		background: linear-gradient(180deg, rgba(225, 239, 255, 1) 0%, rgba(255, 255, 255, 0.88) 97%);
	}
	
	// 弹出层 - 核销二维码
	.qrcode-popup {
		padding: 36rpx 30rpx;
	
		.qr-title {
			font-size: 30rpx;
			margin-bottom: 26rpx;
			font-weight: bold;
			text-align: center;
		}
	
		.pop-content {
			min-height: 260rpx;
			padding: 0 10rpx;
	
			.image {
				display: block;
				width: 510rpx;
				height: 510rpx;
			}
	
		}
	}
	
	.share-btn{
		padding-left: 0 !important;
		padding-right: 0 !important;
	
		background-color: #FFF !important;
	}
	.s-title {
	
		color: #A8B5BC;
		font-size: 32rpx;
		text-align: left;
		height: 60rpx;
		line-height: 60rpx;
	}
	
	.s-right {
	
		display: flex;
		justify-content: center;
		align-items: center;
		width: 5%;
	}
	
	.share-title {
		width: 80%;
	}
	
	.desc {
		color: #BFBFBF;
		font-size: 20rpx;
		height: 34rpx;
		line-height: 34rpx;
		text-align: left;
	}

	.share-box {
		height: 296rpx;
		padding-top: 30rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;

		.share-item {
			display: flex;
			padding: 20rpx 50rpx;
		
		}

	

		.share-image {
			width: 15%;
			display: flex;
			justify-self: center;
			align-items: center;
		}

		.share-image image {
			width: 64rpx;
			height: 64rpx;
		}
	}

	.form-item--input {
		height: 80rpx;
		line-height: 80rpx;

	}

	// 页面头部
	.main-header {

		position: relative;
		width: 100%;
		height: 160rpx;

		background-size: 100% 100%;
		overflow: hidden;
		display: flex;
		align-items: center;

		padding-left: 60rpx;

		.bg-image {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 0;
		}

		.log {
			width: 38%;

			.l-btn {
				float: left;
				width: 200rpx;
				height: 60rpx;
				border-radius: 8rpx;
				background: linear-gradient(180deg, rgba(22, 132, 252, 1) 0%, rgba(100, 174, 255, 1) 100%);
				color: rgba(255, 255, 255, 1);
				font-size: 28rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.user-info {
			width: 62%;
			display: flex;
			height: 100rpx;
			z-index: 1;

			.user-content {
				display: flex;
				flex-direction: column;
				justify-content: center;
				margin-left: 30rpx;
				color: rgba(0, 0, 0, 1);

				.nick-name {
					font-size: 28rpx;
					font-weight: bold;
					max-width: 270rpx;
				}

				.mobile {
					margin-top: 15rpx;
					font-size: 24rpx;
				}



				.login-tips {
					margin-top: 12rpx;
					font-size: 24rpx;
				}

			}
		}
	}

	.box {
		padding: 20rpx 40rpx;
		margin: 0rpx 30rpx;
		border-radius: 20rpx;

		background-color: #FFF;
	}

	.foot {

		width: 100%;
		background-color: #FFF;
	
	}

	.btn {
		width: 100%;
		height: 80rpx;
		border-radius: 8rpx;
		background: linear-gradient(180deg, rgba(22, 132, 252, 1) 0%, rgba(100, 174, 255, 1) 100%);
		color: rgba(255, 255, 255, 1);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.two-box {
		display: flex;
		justify-content: space-between;

	}

	.title {
		height: 32rpx;
		border-left: solid 6rpx #64AEFF;
		font-size: 28rpx;
		color: rgba(16, 16, 16, 1);
		font-weight: bold;
		padding-left: 10rpx;
	}


	.item-content {
		padding: 30rpx 10rpx;



	}

	.shuru-choose {
		width: 100%;
		background-color: #F1F7F7;
		height: 80rpx;
		border-radius: 8rpx;
		color: #1684FC;
		line-height: 80rpx;
		padding-left: 20rpx;
		display: flex;
	}

	.shuru {

		width: 100%;
		background-color: #F1F7F7;
		height: 80rpx;
		border-radius: 8rpx;
		color: #1684FC;
		line-height: 80rpx;
		padding-left: 20rpx;
	}


	.item-content-choose {
		padding: 30rpx 10rpx;
		height: 100rpx;

		width: 100%;
		display: flex;
		justify-content: space-between;

	}

	.type-box {
		width: 32%;

	}

	.type {

		height: 80rpx;
		border-radius: 8rpx;

		line-height: 80rpx;
		text-align: center;
		color: #ABC9FF;
		background-color: #F1F7F7;

	}

	.active {
		background: linear-gradient(180deg, rgba(22, 132, 252, 1) 0%, rgba(100, 174, 255, 1) 100%) !important;
		color: rgba(255, 255, 255, 1) !important;
	}
</style>